<template>
<div>
    <!-- 一个class可以多选  -->
    <!-- 需要设定:上边背景色为黑 布局应该为垂直居中布局==>要先开启flex布局 -->
    <!-- ai-center是指子级元素为垂直居中样式[横向排列] -->
	<div class='topbar  bg-black p-y-2 p-x-3 d-flex ai-center' >
        <img src="../assets/logo.png" height="30">
        <div class="p-x-2 flex-1">
        <div class="text-white">王者荣耀</div>
        <div class="fs-xss text-grey-1 ">团队成就更多</div>
        </div>
        <!-- 背景颜色改为主色调 右边对齐 -->
        <button type="button" class="btn bg-primary  float-right">立刻下载</button>
        <!-- 默认的左中右布局会使元素多大就占多大，要想把button放到右边必须把中的文字撑大 
        实现：中间文字加flex-grow:1-->
    </div>
	<!-- 注意一件事，flex布局只对子级元素有效，对孙级元素没有效果 -->
	<div class='bg-primary p-t-3 p-b-2 '>
        <!-- 实现效果是最左最右有间距的对齐==>around /左右要是没间距就是between -->
        <div class="nav d-flex text-white jc-around text-wh ite">
            <!-- 改变router-link 标签的方法，加个tag=‘标签名’-->
            <div class="nav-item " :class="{active:isa==='1'}">
                <!-- 显示的是首页，要实现效果是加上一个下标，所以给首页赋予一个 active样式 -->
                <router-link class="nav-link " tag="div" to="/" @click.native="active1" >首页</router-link>
            </div>
            <div class="nav-item" :class="{active:isa==='2'}">
                <router-link class="nav-link" tag="div" to="/gl" @click.native="active2" >攻略中心</router-link>
            </div>
            <div class="nav-item" :class="{active:isa==='3'}">
                <!-- 在rl上面写点击事件要加native父组件能监听到自己的原生点击事件-原来的@click已经被rl占用了 -->
                <router-link class="nav-link" tag="div" to="/ss" @click.native="active3" >赛事中心</router-link>
            </div>
        </div>
        </div>	
        <router-view></router-view>
</div>
</template>

<script>
export default {
    data() {
        return {
            isa:'1',
        }
    },
    methods: {
        active1(){this.isa='1'},
        active2(){this.isa='2'},
        active3(){this.isa='3'}
    },

}
</script>

<style >
.topbar{
    position: sticky;
    top: 0;
    /* z轴层级，越高越底部 */
    z-index: 999;
}
</style>